<template>
    <div class="login">
        <transition name="slideT">
			<div class="login-tip" v-show="tipFlag">
				测试账号：&nbsp&nbsp用户名：admin &nbsp&nbsp&nbsp 密码：123456
			</div>
		</transition>
        <form novalidate autocomplete="off" class="form">
             <md-avatar class="md-large">
                <img src="./images/boy.png" alt="People">
            </md-avatar>
            <md-input-container>
                <label>用户名</label>
                <md-input type="text" required v-model="userName"></md-input>
            </md-input-container>
            <md-input-container>
                <label>密码</label>
                <md-input type="password" required v-model="passWord"></md-input>
            </md-input-container>
            <md-button class="md-raised md-accent" id="login" md-theme="brown" placeholder="登录" @click="login">登录</md-button>
            <md-button class="md-raised md-warn" md-theme="brown" placeholder="注册" @click="register">注册</md-button>
        </form>
       <md-dialog-alert :md-content="alert.content" :md-ok-text="alert.ok" ref="dialog"></md-dialog-alert>
        <div class="overlay" v-show="logging">
			<md-spinner :md-size="150" md-indeterminate class="md-accent" md-theme="whiteForm"></md-spinner>
		</div>
    </div>
    
</template>
<script>
export default {
  name:"login",
  data(){
      return {
          alert:{
              content:" ",
              ok:"返回"
          },
          tips:true,
          tipFlag:false,
          userName:"",
          passWord:"",
          logging:false
      }
  },
  mounted(){
      this.tipFlag = true;
      setTimeout(function(){
          this.tipFlag = false;
      }.bind(this),3000);
  },
  methods:{
    login(){
        var userN = this.userName,
        pwd = this.passWord;
        if(!this.check({
            userName:userN,
            passWord:pwd
        })) return;
        this.logging = true;
        this.$router.push('movie');
    },
    isEmpty(val){
        return val==="";
    },
    check(obj){
        if(this.isEmpty(obj.userName)){  //为空
            this.alert.content = '用户名不能为空';
            this.openDialog('dialog');
            return false;
        }
        if(this.isEmpty(obj.passWord)){  //为空
            this.alert.content = '密码不能为空';
            this.openDialog('dialog');
            return false;
        }
        if(this.userName != "admin"){
            this.alert.content = '用户名不匹配';
            this.openDialog('dialog');
            return false;
        }
        if(this.passWord != "123456"){
            this.alert.content = '密码不匹配';
            this.openDialog('dialog');
            return false;
        }
        return true;
    },
    register(){
        this.$router.push("register");
    },
    openDialog(ref) {
      this.$refs[ref].open();
     }
  }
}
</script>
<style>
   @import '../../assets/css/login.css';
</style>
